/**
 * 表单的操作
 * 表的操作是获取用户信息的最重要的手段，在vue中通过v-model指令来完成数据的获取
 * v-model实际上是:value+input的语法糖
 * React的表单操作受控组件的方式，还有另外一种方式是非受控组件的方式
 * 1、什么是受控组件
 * React中表单控件的数据和state关联在一起，这种情况称为受控组件
 * 2、使用受控组件的步骤
 * 1) 定义状态
 * 2) 将这个状态关联到表单中<input value={this.state.userNmae}>
 * 3) 通过onChange事件，将e.target.value的值赋值给状态
 */
import React, { Component } from 'react'
export default class App extends Component {
  constructor(){
    super()
    //1、定义state
    this.state={
      userName:'',
      password:''
    }
  }
  inputUserNameHandle=(e)=>{
    this.setState({userName:e.target.value})
  }
  inputPwdHandle=(e)=>{
    this.setState({password:e.target.value})
  }
  register=()=>{
    console.log('姓名:',this.state.userName);
    console.log('密码:',this.state.password);
  }
  render() {
    return (
      <>
        <div>
            <label htmlFor="userName">姓名：</label>
            <input type="text" id='userName' value={this.state.userName} onChange={this.inputUserNameHandle}/>
        </div>
        <div>
          <label htmlFor="password">密码:</label>
          <input type="text" id='password' value={this.state.password} onChange={this.inputPwdHandle}/>
        </div>
        <div>
           <button onClick={()=>this.register()}>注册</button>
        </div>
      </>
    )
  }
}
